<template>
	<common-page title="忘记密码">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step title="填写新密码" />
			<el-step title="完成重置" />
		</el-steps>
		<el-form v-if="stepActive == 0" ref="resetForm" class="mt-[20px]" :model="formData" :rules="formRules"
			label-width="0" size="large">
			<el-form-item prop="account">
				<el-input v-model="formData.account" clearable placeholder="请输入账号">
					<template #prepend>
						<el-button :icon="User" />
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="mobile">
				<el-input v-model="formData.mobile" clearable placeholder="请输入手机号">
					<template #prepend>
						<el-button :icon="Iphone" />
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="code">
				<el-input v-model="formData.code" clearable placeholder="请输入短信验证码">
					<template #prepend>
						<el-button :icon="Unlock" />
					</template>
					<template #append>
						<div class="pl-2 pr-2">
							<SmsCode :count="60" :sendCodeApi="sendSmsCode"
								:apiParams="{ scene: 'retrieve_password', mobile: formData.mobile }" />
						</div>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="formData.password" clearable show-password placeholder="请输入新密码,长度应为6-16，包含字母、数字、特殊符号">
					<template #prepend>
						<el-button :icon="Lock" />
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password2">
				<el-input v-model="formData.password2" clearable show-password placeholder="请再次输入新密码">
					<template #prepend>
						<el-button :icon="Lock" />
					</template>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :loading="lock" @click="handleReset">提交</el-button>
			</el-form-item>
		</el-form>
		<el-result v-if="stepActive == 1" icon="success" title="密码重置成功" sub-title="请牢记新密码,返回登录后使用新密码登录">
			<template #extra>
				<NuxtLink :to="{ path: '/login' }">
					<el-button type="primary">返回登录</el-button>
				</NuxtLink>
			</template>
		</el-result>
	</common-page>
</template>

<script lang="ts" setup>
import { User, Lock, Iphone, Unlock } from "@element-plus/icons-vue";
import { messageSuccess } from "@/utils/message";
import { forgetPassword, sendSmsCode } from "@/api/login";
import { isMobile } from "@/utils/validate";
import commonPage from './components/page.vue';

definePageMeta({
	layout: false,
	middleware: ['login']
});

const stepActive = ref(0);

const resetForm = ref(null);

const formData = reactive({
	account: "",
	password: "",
	password2: "",
	mobile: "",
	code: "",
	channel: 4,
});

const formRules = {
	account: [
		{ required: true, message: '请输入账号/手机号', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入新密码', trigger: 'blur' }
	],
	password2: [
		{
			validator(rule: any, value: any, callback: any) {
				if (value === '') {
					callback(new Error('请再次输入新密码'))
				} else if (value !== formData.password) {
					callback(new Error('两次输入的新密码不一致'))
				} else {
					callback()
				}
			},
			trigger: ['change', 'blur']
		}
	],
    mobile: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            validator(rule: any, value: any, callback: any) {
                if (!isMobile(value)) {
                    callback(new Error("手机号不符合要求"));
                } else {
                    callback();
                }
            },
            trigger: ["change", "blur"],
        },
    ],
    code: [
        { required: true, message: "请输入短信验证码", trigger: "blur" },
        {
            min: 6,
            max: 6,
            message: "验证码长度应为6",
            trigger: ["change", "blur"],
        },
    ],
};

const { lock, apiCall: apiForgetPassword } = useApiLock(forgetPassword);
const handleReset = async () => {
	await resetForm.value?.validate();
	await apiForgetPassword(formData);
	stepActive.value = 1;
	messageSuccess('密码重置成功');
}

</script>
